<template>
  <div style="display:flex;gap: 10px;flex-direction: column" class="layout">
    <div style="display:flex;gap: 10px;flex-wrap: wrap">
      <el-card style="flex: 1;min-width: 300px" v-for="(item,idx) in surveyData">
        <div style="display:flex;flex-direction: column;align-items: center;gap: 10px">
          <el-text size="small" type="info">{{item.createType === 'admin' ? '官方问卷' : '用户问卷'}}</el-text>
          <el-avatar :size="100" :src="item.createType === 'admin' ? 'imgs/1.png' : 'imgs/2.png'" />
          <el-text size="large" type="info">{{item.title}}</el-text>
          <div style="margin: 0 10px;display: flex;flex-direction: column;padding: 10px 0;background: #f0f0f0;width: 100%;border-radius: 10px;align-items: start;">
            <el-text style="width: 90%;" size="small" type="info">No.{{item.surveyId}}</el-text>
            <el-text style="width: 90%;" size="small" type="info">内容: {{item.content}}</el-text>
            <el-text style="width: 90%;" size="small" type="info">单价: {{item.amount}}</el-text>
          </div>
        </div>
        <template #footer>
          <el-button size="small" @click="handleViewWrite(item)">填写问卷</el-button>
        </template>
      </el-card>
    </div>

  </div>
  <!-- 创建按钮 -->
</template>

<script setup lang="ts">
import {defineProps, ref, reactive, onMounted, watch} from 'vue';
import { ElMessage } from 'element-plus';
import instance from "@/utils/http";
import {useRouter} from "vue-router";
import {useAuthStore} from "@/stores/auth";


const authStore = useAuthStore();

interface Survey {
  surveyId: number;
  amount: number;
  quantity: number;
  unitPrice: number;
  totalDiscountPrice: number;
  title: string;
  condition: string;
  content: string;
  creatorId: number;
  participantCount: number;
  createTime: string;
  endTime: string;
  status: string;
  description: string;
  createType:string;
}

const surveyData = ref<Survey[]>([]);


const fetchSurveys = async () => {
  try {
    const response = await instance.get('/surveys/record/'+authStore.uid);
    surveyData.value = response.data.data;
  } catch (error) {
    ElMessage.error('无法加载调查数据');
  }
};

const router = useRouter()

const handleViewWrite = (row: Survey) => {
  router.push({ name: 'WriteSurey', params: { surveyId:row.surveyId } });
}

onMounted(()=>{
  fetchSurveys()
})

</script>

<style scoped>
</style>
